<template>
  <el-card>
    <div>
      <div style="margin: 10px 5px">
        <el-page-header @back="gotoIndex" style="font-size: 26px" title="返回首页" content="体检预约管理">
        </el-page-header>
      </div>


        <div style="margin: 10px 5px">
          <label style="margin-right: 10px; margin-left: 10px">查询预约人：</label>
          <el-input v-model="search" style="width: 30%;" placeholder="请输入预约人名查询"/>
          <el-button style="margin-left: 10px" type="primary" @click="list">查询</el-button>.
        </div>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="status" fixed="left" label="预约状态" >
          <template slot-scope="scope">
            <el-tag type="danger" v-if="String(scope.row.status) === '1'"
            >待审核</el-tag>
            <el-tag type="success" v-else-if="String(scope.row.status) === '2'">已通过</el-tag>
            <el-tag type="danger" v-else-if="String(scope.row.status) === '3'">未通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reportStatus" fixed="left" label="报告状态" >
          <template slot-scope="scope">
            <el-tag type="danger" v-if="String(scope.row.reportStatus) === '1'">未生成</el-tag>
            <el-tag type="success" v-else-if="String(scope.row.reportStatus) === '2'">已生成</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="体检预约ID"   width="100"/>
        <el-table-column prop="number" label="体检预约号" width="100" />
        <el-table-column prop="username" label="体检预约用户名" width="120" />
        <el-table-column prop="realname" label="预约人" width="80" />
        <el-table-column prop="phone" label="预约人电话" width="120" />
        <el-table-column prop="sex" label="预约人性别" width="100" :formatter="formatSex"  />
        <el-table-column prop="idNumber" label="预约人身份证号" width="150" />
        <el-table-column prop="setmealname" label="预约套餐" width="120" />
        <el-table-column prop="price" label="预约套餐价格费用"  width="135" />
        <el-table-column prop="image"
                         label="图片">
          <template slot-scope="{ row }">
            <el-image style="width: 80px; height: 40px; border: none; cursor: pointer"
                      :src="row.image">
              <div slot="error"
                   class="image-slot">
                <img src="../assets/noImg.png"
                     style="width: auto; height: 40px; border: none">
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="预约审核意见" width="150" />
        <el-table-column prop="remark" label="备注" width="150" />
        <el-table-column prop="updateTime" label="最后操作时间" width="140" />
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button
                type="text"
                size="small"
                class="blueBug"
                @click="handleEdit(scope.row)" >
              编辑
            </el-button>
            <el-button
                size="small"
                type="text"
                class="delBut"
                @click="handleDel(scope.row)" >
              删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="生成报告" width="130">
          <template #default="scope">
            <el-button type="primary" @click="reporthandleEdit(scope.row)">生成报告</el-button>
          </template>
        </el-table-column>
      </el-table>

        <div style="margin: 10px 0">
          <el-pagination
              @size-change="handlePageSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[2,5,10,15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>




      <el-dialog title="提示" :visible.sync="dialogVisible">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px">
          <el-form-item label="体检预约状态:"  label-width="120px" prop="categoryId">
            <el-select v-model="form.status"
                       placeholder="请选择状态"
                       @change="$forceUpdate()">
              <el-option key="1" value="1" label="待审核" ></el-option>
              <el-option key="2"  value="2" label="已通过" ></el-option>
              <el-option key="3"  value="3" label="未通过" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预约审核意见:" prop="reason">
            <el-input v-model="form.reason"
                      type="textarea"
                      :rows="3"
                      maxlength="200"
                      placeholder="套餐描述，最长200字" />
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            <el-input v-model="form.remark"
                      type="textarea"
                      :rows="3"
                      maxlength="200"
                      placeholder="套餐描述，最长200字" />
          </el-form-item>
        </el-form>
        <template #footer>
        <span  slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          <i class="iconfont icon-r-left" style="font-size: 20px;"></i> 取 消</el-button>
        <el-button type="primary" @click="save">
          <i class="iconfont icon-r-yes" style="font-size: 20px;"></i>确 定</el-button>
        </span>
        </template>
      </el-dialog>

      <el-dialog title="生成报告" :visible.sync="reportVisible">
        <el-form :model="reportForm" :rules="reportRules" ref="reportForm" label-width="120px">
          <el-form-item label="体检预约号:"  label-width="120px" prop="orderNumber">
            <el-input v-model="reportForm.orderNumber" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="体检人姓名:"  label-width="120px" prop="realname">
            <el-input v-model="reportForm.realname" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="性别" label-width="120px"  prop="sex">
            <el-radio v-model="reportForm.sex" label="1">男</el-radio>
            <el-radio v-model="reportForm.sex" label="0">女</el-radio>
          </el-form-item>
          <el-form-item label="体检人电话:"  label-width="120px" prop="phone">
            <el-input v-model="reportForm.phone" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="体检人身份证号:"  label-width="120px" prop="idNumber">
            <el-input v-model="reportForm.idNumber" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="体检报告描述:" prop="reportDescription">
            <el-input v-model="reportForm.reportDescription"
                      type="textarea"
                      :rows="4"
                      maxlength="200"
                      placeholder="报告描述，最长200字" />
          </el-form-item>
        </el-form>
        <template #footer>
        <span  slot="footer" class="dialog-footer">
        <el-button @click="reportVisible = false">
          <i class="iconfont icon-r-left" style="font-size: 20px;"></i> 取 消</el-button>
        <el-button type="primary" @click="insertReport()">
          <i class="iconfont icon-r-yes" style="font-size: 20px;"></i>确 定</el-button>
        </span>
        </template>
      </el-dialog>


    </div>
  </el-card>
</template>

<script>

import request from "@/utils/request";
import ImageUpload from "@/components/ImgUpload";
export default {
  components: {
    ImageUpload
  },
  data(){
    return{
      //存放表单数据
      form: {},
      //默认设置提示表单为不可见
      dialogVisible: false,
      reportForm:{},
      reportVisible: false,
      //默认设置表格数据位空
      tableData: [],
      //多选选择器
      options: [],
      //默认设置搜索数据位空
      search:'',
      //分页相应数据绑定
      currentPage:1,//当前页
      pageSize:5,//每页显示数据数
      total:10,//共多少条数据
      //表单效验规则
      rules:{
       status:[
          {required: true, message: "请输入状态", trigger: "blur"}
        ],
        reason: [
          {required: true, message: "请输入意见", trigger: "blur"},
          {max:200, message: "最多输入200个字符", trigger: "blur"}
        ],
        remark: [
          {required: true, message: "请输入备注", trigger: "blur"},
          {max:200, message: "最多输入200个字符", trigger: "blur"}
        ],
      },
      reportRules:{
        orderNumber:[
          {required: true, message: "请输入预约号", trigger: "blur"},
          {pattern: /^([1-9]\d*|0)$/, message: "请输入数字", trigger: "blur"}
        ],
        realname: [
          {required: true, message: "请输入姓名", trigger: "blur"},
        ],
        phone: [
          {required: true, message: "请输入电话号", trigger: "blur"},
          {min: 11, max: 11, message: "长度必须是11个字符", trigger: "blur",},
          //使用正则表达式输入的数据进行校验=> java基础我们讲过正则表达式
          {pattern: /^([1-9]\d*|0)$/, message: "请输入数字", trigger: "blur"}
        ],
        idNumber: [
          {required: true, message: "请输入身份证号码", trigger: "blur"},
          {min: 18, max: 18, message: "长度必须是18个字符", trigger: "blur"},
          {pattern: /^([1-9]\d*|0)$/, message: "请输入数字", trigger: "blur"}
        ],
        reportDescription: [
          {required: true, message: "请输入描述", trigger: "blur"},
          {max:200, message: "最多输入200个字符", trigger: "blur"}
        ],
      },

    }
  },
  created() {
    this.list();//调用list方法
  },
  methods:{
    gotoIndex(){
      this.$router.push("/adminLayout");
    },
    formatSex(row) {
      return row.sex === '1' ? '男' : '女' ;
    },
    list() {
      request.get("/api/order/page",{
        params:{//指定请求携带的参数
          page:this.currentPage,
          pageSize:this.pageSize,
          realname:this.search,
        }}).then(res => {
        console.log("res-",res)
        //绑定 tableData, 显示在表格
        this.tableData =res.data.data.records
        this.total=res.data.data.total
      })
    },
    save() {

        this.$refs['form'].validate((valid)=>{
          console.log("valid",valid);
          if(valid){//进行效验,通过
            request.put("/api/order", this.form).then(res => {
              console.log(res)
              if(res.data.code == 1){
                this.$message({
                  type:"success",
                  message:"更新成功"
                })
                this.dialogVisible = false;
                //调用list方法, 刷新数据
                this.list();
              }else  {
                this.$message({
                  type:"error",
                  message: res.data.msg
                })
                this.dialogVisible = false;
                //调用list方法, 刷新数据
                this.list();
              }
            }).catch(err => {
              this.$message.error('请求出错了：' + err.message)
            })
          }else {//效验没通过
            return false;
          }
        })
    },
    insertReport(){
      console.log("this.form",this.reportForm.status);
      this.$refs['reportForm'].validate((valid)=>{
        console.log("valid",valid);
        if(valid){//进行效验,通过
          request.post("/api/report", this.reportForm).then(res => {
            console.log(res)
            if(res.data.code == 1){
              this.$message({
                type:"success",
                message:"生成报告成功"
              })
              this.reportVisible = false;
              //调用list方法, 刷新数据
              this.list();
            }else  {
              this.$message({
                type:"error",
                message: res.data.msg
              })
              this.reportVisible = false;
              //调用list方法, 刷新数据
              this.list();
            }
          }).catch(err => {
            this.$message.error('请求出错了：' + err.message)
          })
        }else {//效验没通过
          return false;
        }
      })
    },

    handleEdit(row){
      this.form.id=row.id
      this.dialogVisible= true
    },
    reporthandleEdit(row){
      this.reportForm.orderId = row.id
      this.reportForm.phone=row.phone
      this.reportForm.orderNumber= row.number
      this.reportForm.realname = row.realname
      this.reportForm.sex = row.sex
      this.reportForm.idNumber= row.idNumber
      this.reportForm.status = row.reportStatus
      console.log(" this.reportForm," ,this.reportForm)
      this.reportVisible = true
    },
    handleDel(row){
      this.$confirm('确认删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() =>{
        request.delete("/api/order/" + row.id).then(res => {
          console.log("deleteres,",res)
          if(res.data.code == 1){
            this.$message({
              type:"success",
              message:"删除成功"
            })
          }else {
            this.$message({
              type:"error",
              message: res.data.msg
            })
          }
          this.list()
        }).catch(err => {
          this.$message.error('请求出错了：' + err.message)
        })
      })

    },
    handleCurrentChange(pageNum){//处理分页请求
      //当用户点击分页超链接时会携带pageNum
      console.log("pageNum",pageNum)
      this.currentPage=pageNum
      //发出分页请求
      this.list()
    },
    handlePageSizeChange(pageSize){
      console.log("pageSize",pageSize)
      this.pageSize=pageSize
      this.list()
    },
  }
}

</script>
<style scoped lang="scss">
.el-table {
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-form {
  margin-top: 0;
}
.disabled-text {
  color: #bac0cd !important;
}
.blueBug {
  color: #419EFF !important;
  position: relative;
}
.addCheck {
  .el-input {
    width: 130px;
  }

  .el-input-number__increase {
    border-left: solid 1px #fbe396;
    background: #fffbf0;
  }

  .el-input-number__decrease {
    border-right: solid 1px #fbe396;
    background: #fffbf0;
  }

  input {
    border: 1px solid #fbe396;
  }

  .table {
    border: solid 1px #ebeef5;
    border-radius: 3px;

    th {
      padding: 5px 0;
    }

    td {
      padding: 7px 0;
    }
  }
}
.addBut {
  background: #ffc200;
  display: inline-block;
  padding: 0px 20px;
  border-radius: 3px;
  line-height: 40px;
  cursor: pointer;
  border-radius: 4px;
  color: #333333;
  font-weight: 500;
}
.blueBug::after {
  content: '';
  position: absolute;
  right: -6px;
  height: 14px;
  width: 0px;
  border-right: solid 1px #EBEEF5 !important;
}

.delBut {
  color: #F56C6C !important;
  position: relative;
}

.delBut::after {
  content: '';
  position: absolute;
  right: -6px;
  height: 14px;
  width: 0px;
  border-right: solid 1px #EBEEF5 !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>


